<template>
    <div class="backgImage">
        <div class="div1">
            <TitleView title="动静电仪统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <Device :data="DataA[0].deviceNum" :title="DataA[0].deviceType" :unit="'台'" :imageUrl="image1"
                    :colors="0" />
                <Device :data="DataA[1].deviceNum" :title="DataA[1].deviceType" :unit="'台'" :imageUrl="image1"
                    :colors="0" />
                <Device :data="DataA[2].deviceNum" :title="DataA[2].deviceType" :unit="'台'" :imageUrl="image4"
                    :colors="0" />
                <Device :data="DataA[3].deviceNum" :title="DataA[3].deviceType" :unit="'台'" :imageUrl="image5"
                    :colors="0" />
            </div>
        </div>
        <div class="div2">
            <TitleView title="能耗管理" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <EnergyLeftB :data="DataB" />
            </div>
        </div>
        <div class="div2">
            <TitleView title="设备运行明细" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <EnergyLeftC :data="DataC" />
            </div>
        </div>
    </div>
</template>

<script>
import { energy_left } from "@/request/api.js";
import image1 from "@/assets/组 6832.png";
import image4 from "@/assets/组 6832(3).png";
import image5 from "@/assets/组 6832(4).png";
import Device from "./components/Device.vue";
import EnergyLeftB from "./components/EnergyLeftB.vue";
import EnergyLeftC from "./components/EnergyLeftC.vue";
export default {
    components: {
        Device,
        EnergyLeftB,
        EnergyLeftC
    },
    data() {
        return {
            image1: image1,
            image4: image4,
            image5: image5,
            DataA: [{ "deviceType": "动设备", "deviceNum": "12" }, { "deviceType": "静设备", "deviceNum": "12" }, { "deviceType": "电气设备", "deviceNum": "12" }, { "deviceType": "仪表设备", "deviceNum": "12" }],
            DataB: [],
            DataC: [],
        }
    },

    created() {
        this.getData()
    },
    methods: {
        titleMoreClick(msg) {
            console.log(msg);

        },
        getData() {
            energy_left().then((res) => {
                console.log("res:", res);
                if (res.data) {
                    this.DataA = res.data.data1
                    this.DataB = res.data.data2
                    this.DataC = res.data.data3
                }
            }).catch(() => {
                console.log("错误");

            })
        }
    }
}
</script>

<style lang="scss" scoped>
.div1 {
    height: 277px;

    .div1_d {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

.div2 {
    height: 343px;

    .div1_d {
        margin-top: 20px;
    }
}

.div3 {
    .div1_d {}
}
</style>